<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shiziduiwu/shiziduiwu.css">
    <link rel="stylesheet" href="./css/css.css">
    <script src="./js/jquery-3.6.4.min.js"></script>
    <script src="./js/all.js"></script>
</head>
<body>
    <div class="commer-header">
        <div class="header-logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="header-nav">
            <ul>
                <li class="index"><a href="index.html">首页</a></li>
                <li><a href="bumengaikuang.html">部门概况</a></li>
                <li><a href="shiziduiwu.html">师资队伍</a></li>
                <li><a href="#">思政建设</a></li>
                <li><a href="#">红馆</a></li>
                <li><a href="#">心理健康教育中心</a></li>
                <li><a href="#">教学科研</a></li>
                <li><a href="#">学生社团</a></li>
            </ul>
        </div>
        <div class="input-img">
            <img src="./img/搜索.png" alt="">
        </div>
        <div class="header-input">
            <input type="text" placeholder="请输入关键词搜索">
        </div>
        <button class="header-button">
            <span>一</span>
            <span>一</span>
            <span>一</span>
        </button>
        <div class="yc">
            <ul>
                <li class="index"><a href="index.html">首页</a></li>
                <li><a href="#">院系首页</a></li>
                <li><a href="bumengaikuang.html">部门概况</a></li>
                <li><a href="shiziduiwu.html">师资队伍</a></li>
                <li><a href="#">思政建设</a></li>
                <li><a href="#">红馆</a></li>
                <li><a href="#">心理健康教育中心</a></li>
                <li><a href="#">教学科研</a></li>
                <li><a href="#">学生社团</a></li>
            </ul>
        </div>
    </div>

    <div class="commer-banner">
        <img src="https://sdcc.edu.cn/static/images/common/banner.jpg" alt="">
    </div>

    <div class="commer-body">
        <div class="container">
            <!-- left列表 -->
            <div class="body-left">
                <ul>
                    <div class="title">
                        <div class="nav">
                            <div class="main">学院概况</div>
                            <div class="main-es">College Profile</div>
                        </div>
                    </div>
                    <li>
                        <a href="bumengaikuang.html">部门概况</a>
                    </li>
                    <li class="index">
                        <a href="shiziduiwu.html">师资队伍</a>
                    </li>
                    <li>
                        <a href="#">思政建设</a>
                    </li>
                    <li>
                        <a href="#">红馆</a>
                    </li>
                    <li>
                        <a href="#">心理健康教育中心</a>
                    </li>
                    <li>
                        <a href="#">教学科研</a>
                    </li>
                    <li>
                        <a href="#">学生社团</a>
                    </li>
                </ul>
            </div>

            <div class="body-right">
                <div class="body-nav">
                    <div class="nav-left">
                        <span>师资队伍</span>
                    </div>
                    <div class="nav-right">
                        <span>当前所在位置：</span>
                        <a href="index.html">首页</a>
                        <span>></span>
                        <a href="shiziduiwu.html">师资队伍</a>
                    </div>
                </div>
                <div class="title">
                    <span class="one"></span>
                    <span class="two"></span>
                    <span class="three"></span>
                </div>
                <div class="body-one">

                    <div class="container-one">
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                        <div class="one-item">
                            <span class="icon">·</span>
                            <span class="text">山东城院召开公文写作培训会</span>
                            <span class="year">2022-11-24</span>
                        </div>
                    </div>
                </div>
                <div class="body-two">
                    <div class="container-two">
                        <div class="two-item">
                            <div class="two-left">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="two-right">
                                <p>传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</p>
                                <span>2021-05-21</span>
                            </div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="two-right1">
                                <p>传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</p>
                                <p class="none">新生开展“红色观影”德育课…</p>
                                <span>2021-05-21</span>
                            </div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="two-right2">
                                <p>传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</p>
                                <span>2021-05-21</span>
                            </div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="two-right3">
                                <p>传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</p>
                                <span>2021-05-21</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="body-three">
                    <div class="container-three">
                        <div class="three-item">
                            <div class="three-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="three-text">传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</div>
                            <hr>
                            <div class="three-footer">
                                <span>2021-04-17</span>
                            </div>
                        </div>
                        <div class="three-item">
                            <div class="three-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="three-text">传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</div>
                            <hr>
                            <div class="three-footer">
                                <span>2021-04-17</span>
                            </div>
                        </div>
                        <div class="three-item">
                            <div class="three-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="three-text">传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</div>
                            <hr>
                            <div class="three-footer">
                                <span>2021-04-17</span>
                            </div>
                        </div>
                        <div class="three-item">
                            <div class="three-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="three-text">传承八一精神 凝聚奋进力量|马克思主义学院第- 第二党支部开展主题...</div>
                            <hr>
                            <div class="three-footer">
                                <span>2021-04-17</span>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#" class="a">查看更多</a>
            </div>
        </div>
    </div>

    <div class="commer-footer">
        <div class="container">
            <div class="footer-top">
                <div class="footer-logo">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="footer-text">
                    <span>地址:山东省烟台市高新区海天路1001号</span>
                    <span>办公室电话:0535-293876</span>
                </div>
                <div class="footer-ewm">
                    <img src="./img/ewm.jpg" alt="">
                    <div class="none">微信公众号</div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <span>Copyright ◎山东省城市服务技师学院版权所有</span>
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function() {
        $('.title .one').on('click', function() {
            // 切换.body-three和.body-one的显示状态
            $('.body-three').hide();
            $('.body-one').show();
            $('.body-two').hide();
            // 更换.one的背景图片
            $('.two').css('background-image', 'url(./img/two.png)'); // 替换为新的图片路径
            $('.three').css('background-image', 'url(./img/three.png)'); // 替换为新的图片路径
            // 更换.two的背景图片
            $('.one').css('background-image', 'url(./img/one-red.png)'); // 替换为新的图片路径
        });
        $('.title .two').on('click', function() {
            // 切换.body-three和.body-one的显示状态
            $('.body-three').hide();
            $('.body-one').hide();
            $('.body-two').show();
            // 更换.one的背景图片
            $('.one').css('background-image', 'url(./img/one.png)'); // 替换为新的图片路径
            $('.three').css('background-image', 'url(./img/three.png)'); // 替换为新的图片路径
            // 更换.two的背景图片
            $('.two').css('background-image', 'url(./img/two-red.png)'); // 替换为新的图片路径
        });
        $('.title .three').on('click', function() {
            // 切换.body-three和.body-one的显示状态
            $('.body-three').show();
            $('.body-one').hide();
            $('.body-two').hide();
            // 更换.one的背景图片
            $('.one').css('background-image', 'url(./img/one.png)'); // 替换为新的图片路径
            $('.two').css('background-image', 'url(./img/two.png)'); // 替换为新的图片路径
            // 更换.two的背景图片
            $('.three').css('background-image', 'url(./img/three-red.png)'); // 替换为新的图片路径
        });
    })
</script>
1